import React, { Component } from 'react';
import { connect } from 'react-redux';
import { HeaderWrapper, Logo, Nav, NavItem, NavSearch, Addition, Button, SearchWrapper,SearchInfo,SearchInfoTitle,SearchInfoSwitch,SearchInfoItem,SearchInfoList } from './style';
import { CSSTransition } from 'react-transition-group';
import { actionCreators } from './store/';
import { actionCreators as loginActionCreators } from '../../pages/login/store';
import { Link } from 'react-router-dom';

class Header extends Component {
    getListArea = () => {
        const { focused, list, page,totalPage, mouseIn, handleMouseEnter, handleMouseLeave,handleChangePage } = this.props;
        const newList = list.toJS();
        const pageList = [];
        
        if (newList.length) {
            for (let i = (page-1) * 10 ; i < page * 10; i++) {
                pageList.push(
                    <SearchInfoItem key={newList[i]}>{newList[i]}</SearchInfoItem>
                )
            }
        }
        if (focused || mouseIn) {
            return (
                <SearchInfo
                    onMouseEnter={handleMouseEnter}
                    onMouseLeave={handleMouseLeave}
                >
                    <SearchInfoTitle>
                        热门搜索
                        <SearchInfoSwitch onClick={() => handleChangePage(page, totalPage,this.spinIcon)}>
                            <span ref={(icon)=>{this.spinIcon=icon}} className="iconfont spin">&#xe851;</span>
                            换一换
                        </SearchInfoSwitch>   
                    </SearchInfoTitle>
                    <SearchInfoList>
                        {pageList}
                    </SearchInfoList> 
                </SearchInfo>
            )
        } else {
            return null;
        }
    }

    render() {
        const { focused, login, handleInputFocus, handleInputBlur, list, toggleLogout } = this.props;
        return(
        <HeaderWrapper>
            <Link to='/'>
                <Logo />
            </Link>
            <Nav >
                <NavItem className='left active'>首页</NavItem>
                <NavItem className='left'>下载App</NavItem>
                <SearchWrapper>
                    <CSSTransition
                        timeout={200}
                        in={focused}
                        classNames="slide"
                    >
                        <NavSearch
                            className={focused ? 'focused' : ''}
                            onFocus={()=>handleInputFocus(list)}
                            onBlur={handleInputBlur}
                        ></NavSearch>
                    </CSSTransition>
                    <span className={focused ? 'focused iconfont zoom' : 'iconfont zoom'}>&#xe617;
                    </span>
                {this.getListArea()}
                </SearchWrapper>
                {
                    login ? <NavItem onClick={toggleLogout} className='right'>退出</NavItem> :
                    <Link to='/login/'><NavItem className='right'>登录</NavItem></Link>
                }
                <NavItem className='right'>
                    <span className="iconfont">&#xe636;</span>
                </NavItem>
            </Nav>
            <Addition>
                <Link to='/write'>
                    <Button className='writing'>
                    <span className="iconfont">&#xe615;</span>
                        写文章
                    </Button>
                </Link>
                <Button className='reg'>注册</Button>
            </Addition>
        </HeaderWrapper>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        // focused: state.get('header').get('focused')
        focused: state.getIn(['header', 'focused']),
        list: state.getIn(['header', 'list']),
        page: state.getIn(['header', 'page']),
        mouseIn: state.getIn(['header', 'mouseIn']),
        totalPage: state.getIn(['header', 'totalPage']),
        login: state.getIn(['login','login'])
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        handleInputFocus(list) {
            // if (list.size > 0) {
            //     dispatch(actionCreators.getList())
            // }
            (list.size === 0) && dispatch(actionCreators.getList())
            dispatch(actionCreators.searchFocus());
        },
        handleInputBlur() {
            dispatch(actionCreators.searchBlur());
        },
        handleMouseEnter() {
            dispatch(actionCreators.mouseEnter());
        },
        handleMouseLeave() {
            dispatch(actionCreators.mouseLeave());
        },
        handleChangePage(page, totalPage, spin) {
            // 使用 replace 方法将非数字的部分替换为空
            let originalAngle = spin.style.transform.replace(/[^0-9]/ig, '');
            if (originalAngle) {
                originalAngle = parseInt(originalAngle);
            } else {
                originalAngle = 0;
            }
            spin.style.transform = `rotate(${originalAngle + 360}deg)`;
            if (page < totalPage) {
                dispatch(actionCreators.changePage(page+1))
            } else {
                dispatch(actionCreators.changePage(1))
            }
        },
        toggleLogout() {
            dispatch(loginActionCreators.changeLogout())
        }
    }
}

export default connect(mapStateToProps,mapDispatchToProps)(Header);